<!DOCTYPE html>
<html lang="zh" style="height: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<body style="background: white;height: 100%" class="list" >
<div th:replace="include/head.html::html"></div>
<script th:src="@{work/js/mq/sockjs.js}"></script>
<script th:src="@{work/js/mq/stomp.js}"></script>
<div class="layui-fluid layui-anim-upbit layui-anim" >
    <div class="layui-card" id="log-container" style="height:100%;">
        <div>

        </div>
    </div>
</div>
<style>
    #log-container{
        font-size: 20px;
    }
    .infotext{
        color: green;
    }
    .debugtext{
        color: yellow;
    }
    .warntext{
        color: red;
    }
    .errortext{
        color: red;
    }
    .classnametext{
        color: blue;
    }
</style>
<script type="text/javascript" th:inline="none">
    var $;
    layui.use(['jquery'], function () {
        $ = layui.$;
        openSocket();
    });
    <!-- 日志实时推送业务处理 -->
    var stompClient = null;

    function openSocket() {
        if (stompClient == null) {
            if($("#log-container").find("span").length===0){
                $("#log-container div").after("<span>通道连接成功,静默等待.....</span><img src='work/img/img_loading.gif'>");
            }
            var socket = new SockJS(layui.cache.host+'websocket?token=kl');
            stompClient = Stomp.over(socket);
            stompClient.debug = function(){
                //关闭控制的日志输出
            };
            stompClient.connect({token: "kl",'user-name':"123"}, function (frame) {
                this.subscribe('/topic/pullLogger', function (event) {
                    var content = JSON.parse(event.body);
                    var leverhtml = '';
                    var className = '<span class="classnametext">' + content.className + '</span>';
                    switch (content.level) {
                        case 'INFO':
                            leverhtml = '<span class="infotext">' + content.level + '</span>';
                            break;
                        case 'DEBUG':
                            leverhtml = '<span class="debugtext">' + content.level + '</span>';
                            break;
                        case 'WARN':
                            leverhtml = '<span class="warntext">' + content.level + '</span>';
                            break;
                        case 'ERROR':
                            leverhtml = '<span class="errortext">' + content.level + '</span>';
                            break;
                    }
                    $("#log-container div").append("<p class='logp'>" + content.timestamp + " " + leverhtml + " --- [" + content.threadName + "] " + className + " ：" + content.body + "</p>");
                    if (content.exception != "") {
                        $("#log-container div").append("<p class='logp'>" + content.exception + "</p>");
                    }
                    if (content.cause != "") {
                        $("#log-container div").append("<p class='logp'>" + content.cause + "</p>");
                    }
                    // $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
                }, {
                    token: "kltoen"
                });
            });
        }
    }

    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }
</script>
</body>
</html>
